<template>
  <div class="echart-line-wrapper" ref="wrapper"
  :style="{width: '100%', height: '100%'}">
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart 
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  LineChart,
  LegendComponent,
  DatasetComponent,
  CanvasRenderer,
])

  export default {
    methods: {
      init(name, xData, yDatas) {
        let chart = echarts.init(this.$refs.wrapper);
        let series = [];
        let colors = ['skyblue', 'orange', 'cyan', 'yellow', 'red', 'cyan'];
        yDatas.forEach((data, idx) => {
          series.push({
            name: data.name,
            data: data.data,
            type: 'line',
            itemStyle:{
              color: colors[idx],
              lineStyle: {
                color: colors[idx]
              }
            }
          })
        })
        const option = {
          title: {
            text: name,
          },
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value',
          },
          series,
          grid: {
            left: '1%',
            right: '4%',
            bottom: '23%',
            containLabel: true,
          },
          legend: {
            show: true,
            type: 'scroll',
            orient:'horizontal',
            padding: 10,
            tooltip: {
              show: true
            },
            bottom: '10%'
            // icon: 'rect'
          }
        };
        chart.setOption(option);
      }
    },
  }
</script>

<style lang="less" scoped>

</style>